<template>
  <div id="frame">
    <!-- 菜单 -->
    <menuIndex v-if="showMenu" id="myMenu" />
    <div id="frame-right">
      <!-- 头部 -->
      <headerIndex v-if="showMenu" id="headerIndex" />
      <!-- 内容区 -->
      <div id="frame-content">
        <transition name="fade-transform" mode="out-in">
          <router-view />
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
import menuIndex from "./components/menu";
import headerIndex from "./components/header";
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState({
      showMenu: state => state.common.showMenu
    })
  },
  components: {
    menuIndex,
    headerIndex
  }
};
</script>

<style lang="scss" scoped>
#frame {
  width: 100vw;
  height: 100vh;
  display: flex;
  overflow: hidden;
}
// 头部
#headerIndex {
  background-color: $default-light;
  position: sticky;
  top: 0;
  z-index: 2;
}
// 内容区
#frame-content {
  box-sizing: border-box;
  padding: 15px;
  overflow-x: hidden;
}
// 菜单
#myMenu {
  width: 210px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: $frame-primary;
  transition: all 0.3s;
}
// 右边头部加内容区
#frame-right {
  width: calc(100% - 210px);
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  transition: all 0.3s;
}
.frame-right-full {
  width: 100% !important;
}
/* 路由切换动画 S */
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all 0.3s;
}

.fade-transform-enter {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
/* 路由切换动画 E */
</style>
